<template>
    <div style="min-width: 829px">
        <!-- 充值记录 -->
        <div v-if="$route.path == '/rechargeRecord'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="会员卡号：">
                        <el-input v-model="paging.vip_no" placeholder="请输入会员卡号" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="姓名：">
                        <el-input v-model="paging.realname" placeholder="请输入姓名" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="paging.phone" placeholder="请输入手机号" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="业务单号：">
                        <el-input v-model="paging.out_trade_no" placeholder="请输入业务单号" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="查询时间段：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                            style="width: 300px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button style="margin-left:auto;">导出</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border key="1" show-summary>
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="out_trade_no" label="业务单号" align="center"></el-table-column>
                    <el-table-column prop="user.vip_no" label="会员卡号" align="center"></el-table-column>
                    <el-table-column prop="user.realname" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="user.phone" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="date" label="充值时间" align="center"></el-table-column>
                    <el-table-column prop="user.balance" label="当前余额（元）" align="center"></el-table-column>
                    <el-table-column prop="price" label="总充值余额（元）" align="center"></el-table-column>
                    <el-table-column label="充值方式" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.pay_type | pay_typeFilter }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="staff.name" label="操作员工" align="center"></el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            bill_time_start: [],
            paging: {
                page: 1,
                total: 0,
                limit: 100,
                realname: '',
                phone: '',
                vip_no: '',
                out_trade_no: '',
            },
            tableData: [],
        };
    },
    filters: {
        pay_typeFilter(val) {
            let arr = ['', '微信', '支付宝', '现金', '银行卡'];
            return arr[val];
        },
    },
    created() {
        if (this.$route.path == '/rechargeRecord') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        async repairGetList() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.start_time = this.bill_time_start[0] || '';
            this.paging.end_time = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            let { code, data } = await this.$Http.getPriceChange(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}
</style>
